<template>
	<view class="console-sort" 
	@mouseenter="handleMouseEnter" 
	@mousemove="handleMouseEnter"
    @mouseleave="handleMouseLeave">
		<view class="link-red-book-btn" v-if="status == 0">
			<rb-bottom-a mod="link" @click="linkRedBookRoom">连接小红书直播间</rb-bottom-a>
		</view>
		<scroll-view v-if="status > 0" scroll-y class="table-view">
			<block v-for="(fans, index) in allFans" :key="fans.id">
				<sort-cell :sType="type" :so="(index + 1)" :info="fans"/>
			</block>
		</scroll-view>
	</view>
</template>

<script>
	
	import rbBottomA from '@/components/rb-bottom-a/rb-bottom-a.vue'
	import consoleCell from '@/components/console-cell/console-cell.vue'
	import sortCell from '@/components/sort-cell/sort-cell.vue'
	
	export default {
		name:"console-sort",
		components: {
			rbBottomA,
			consoleCell,
			sortCell
		},
		props: {
			type: {
				type: String,
				default: 'all'
			},
			status: 0
		},
		data() {
			return {
				allFans: [],
				scrollToFocusId: '',
				scrollTo: true,
				scrollToAnimation: false,
				page: 1,
				pageSize: 100
			};
		},
		
		watch: {
			type(newVal) {
				this.configData()
			}
		},
		
		created() {

			// 排行榜发生变化
			window.electronAPI.onFansSortChanged(() => {
				this.configData()
			})

			this.configData()
		},
		
		methods: {
			
			linkRedBookRoom() {
				window.electronAPI.linkRedBookRoom()
			},
			
			handleMouseEnter() {
				this.scrollTo = false
			},
			
			handleMouseLeave() {
				this.scrollTo = true
			},
			
			configData() {
				if (this.type == 'all') {
					window.electronAPI.getAllFansSort().then((allFans) => {
						this.allFans = allFans
					})
				}
				if (this.type == 'normal') {
					window.electronAPI.getNowFansSort().then((nowFans) => {
						this.allFans = nowFans
						console.log(nowFans)
					})
				}
			}
		}
	}
</script>

<style scoped>
	
	.console-sort {
		width: 100%;
		height: 100%;
		background-color: #272730;
		border-bottom-left-radius: 3px;
		border-bottom-right-radius: 3px;
		border-top-right-radius: 3px;
		display: flex;
		border: #73738f 1px solid;
		box-sizing: border-box;
	}
	
	.link-red-book-btn {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.table-view {
		width: 100%;
		height: 100%;
		overflow-y: auto;
	}
	
	::v-deep ::-webkit-scrollbar {
	  display: block !important; /* 强制显示滚动条 */
	  width: 0;                /* 滚动条的宽度 */
	  height: 0;              /* 滚动条的高度 */
	}
	
	::v-deep ::-webkit-scrollbar-thumb {
	  background-color: #49495a;   /* 滚动条滑块的颜色 */
	  border-radius: 2px;      /* 滚动条滑块的圆角 */
	}
	
	::v-deep ::-webkit-scrollbar-track {
	  background-color: #272730; /* 滚动条轨道的颜色 */
	  border-radius: 10px;       /* 滚动条轨道的圆角 */
	}


</style>